<!-- 代码编辑器 -->
<template>
  <DiffEditor
    v-if="diff"
    ref="editorRef"
    v-model="model"
    :language="language"
    :theme="theme"
    v-model:original="original"
    :originalLanguage="originalLanguage"
    :config="config"
    style="height: 600px"
  />
  <BaseEditor
    v-else
    ref="editorRef"
    v-model="model"
    :language="language"
    :theme="theme"
    :config="config"
    style="height: 600px"
  />
</template>

<script setup>
import { ref } from "vue";
import BaseEditor from "./components/base-editor.vue";
import DiffEditor from "./components/diff-editor.vue";
import "./user-worker";

defineOptions({ name: "MonacoEditor" });

defineProps({
  /** 语言 */
  language: {
    type: String,
    default: "typescript",
  },
  /** 主题 */
  theme: String,
  /** 是否为diff模式 */
  diff: Boolean,
  /** 原始内容语言 */
  originalLanguage: String,
  /** 配置 */
  config: Object,
});

/** v-model */
const model = defineModel({ type: String });

/** 原始内容 */
const original = defineModel("original", { type: String });

/** 组件实例 */
const editorRef = ref(null);

/** 获取编辑器实例 */
const getEditorIns = () => {
  return editorRef.value?.getEditorIns?.();
};

defineExpose({ getEditorIns });
</script>
